<template>
    <h1>{{ message }}</h1>
    <!--
        v-bind语法：
            v-bind:属性名="数据"
            简写方式： :属性名="数据"   称为 语法糖
    -->
    <img v-bind:src="imgSrc" width="200" height="200"> <br>
    <a v-bind:href="url">点击去百度</a>
    <img :src="imgs" alt="">
    <!-- <img :src="imgurl" alt=""> -->
     <hr>
     <div :id="id"> v-bind的id绑定</div>
     <img :src="imgUrl" alt="" width="200" height="200">
     <button @click="id='d2'">点击更改样式</button>
     <button @click="changOgg">点击动态更改id的样式</button>
    </template>
<script>
import imgass from '../assets/vue.svg'
export default {
    data() { 
        return {
            /**
             *  {{ 文本插值 用来输出数据的}}
             *  v-html 用来输出html代码 
             * v-once 只渲染一次 不监听数据变化
             * v-for 循环渲染列表
             */
            message: '属性绑定v-bind:属性名="数据"',
            imgSrc: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/127507/28/22572/425491/620decfaE2f529bc0/451913a8fb160392.jpg',
            url: 'http://www.baidu.com',
            imgs: imgass,
            // imgurl: '../assets/vue.svg',
            id:"d1",
            imgUrl: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/256465/1/17891/81937/67a350fdF9fc93247/dadb3674e98452f7.jpg',
            

        }
    },
    methods: {
        changOgg() { 
            this.id='d2'
        }
    }
}

</script>
<style scoped>
#d1{
    font-size: 20px;
    color: red;
}
#d2{
    font-size: 30px;
    font-weight: 700;
    color: chartreuse;
}

</style>